<!-- @format -->
<script setup>
	import * as echarts from 'echarts'
	import { onMounted, ref } from 'vue'

	const divRef = ref(null)

	onMounted(() => {
		// 基于准备好的dom，初始化echarts实例
		const myChart = echarts.init(divRef.value)
		// 绘制图表
		myChart.setOption({
			legend: {
				top: 'bottom'
			},
			toolbox: {
				show: true,
				feature: {
					mark: { show: true },
					dataView: { show: true, readOnly: false },
					restore: { show: true },
					saveAsImage: { show: true }
				}
			},
			series: [
				{
					name: 'Nightingale Chart',
					type: 'pie',
					radius: [50, 250],
					center: ['50%', '50%'],
					roseType: 'area',
					itemStyle: {
						borderRadius: 8
					},
					data: [
						{ value: 40, name: 'rose 1' },
						{ value: 38, name: 'rose 2' },
						{ value: 32, name: 'rose 3' },
						{ value: 30, name: 'rose 4' },
						{ value: 28, name: 'rose 5' },
						{ value: 26, name: 'rose 6' },
						{ value: 22, name: 'rose 7' },
						{ value: 18, name: 'rose 8' }
					]
				}
			]
		})
	})
</script>

<template>
	<div
		class="bit-chart"
		ref="divRef"></div>
</template>

<style lang="scss" scoped>
	.bit-chart {
		width: 800px;
		height: 500px;
		margin: 100px auto;
		border: 3px solid palevioletred;
	}
</style>
